<template>
    <!-- <div class="content-list"> -->
    <div>
        <!-- 电影展示组件 start -->
        <!-- <div class="film-item" v-for="film in filmList" :key="film.filmId"> -->
            <!-- get参数方式 取值为String类型 -->
        <!-- <router-link class="film-item" v-for="film in filmList" :key="film.filmId"
            tag="div"
            :to="'/detail?filmId='+film.filmId"
        > -->
        <!-- get 参数方式 取值为Object类型--1-- -->
        <!-- <router-link class="film-item" v-for="film in filmList" :key="film.filmId"
            tag="div"
            :to="{path:'/detail',query:{filmId:film.filmId,aa:'梦云'}}"
        > -->
        <!-- get 参数方式 取值为Object类型--2-- -->
        <router-link class="film-item" v-for="film in filmList" :key="film.filmId"
            tag="div"
            :to="{name:'detail',query:{filmId:film.filmId,aa:'梦云'}}"
        >
            <div class="film-img" :style="`background-image: url(${film.filmImg})`"></div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source" v-show="film.source">
                <span class="star-img" v-for="(value,index) in 5" :key="index" :class="film.source>=value?'open':'close'"></span>
                <!-- <span class="star-source">{{getSource}}</span> -->
                <span class="star-source">{{film.source | getSource()}}</span>
            </div>
            <div class="film-source" v-show="!film.source" style="text-align:center;font-size:0.2rem;">
                <span class="star-tip">暂无评分!</span>
            </div>
        </router-link>
        <!-- </div> -->
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
export default {
    props: {
        filmList: {
            type: Array,
            dafault() {
                return [];
            }
        }
    },
    methods: {}
};
</script>
<style lang="less" scoped>
.film-item {
    width: 2.35rem;
    height: 4.55rem;
    display: inline-block;
    margin-left: 0.1rem;
    vertical-align: top;
    > .film-img {
        height: 3.6rem;
        background-color: @gray-light;
        background-repeat: no-repeat;
        background-size: cover;
    }
    > .film-title {
        font-size: 0.26rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0.1rem;
    }
}
</style>